<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风采展示</title>

    <link rel="stylesheet" href="fencai.css">
</head>

<body>
    <header>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#first">主页</a></li>
                <li class="dropdown">
                    <a href="#second">简介</a>
                </li>

                <li class="dropdown">
                    <a href="#third">计划</a>
                </li>

                <li class="dropdown">
                    <a href="#fourth">启航</a>
                </li>
            </ul>
        </div>

        <!-- 个人简介第一页 -->
        <div id="first">
            <div class="title">个人网站</div>
            <div class="passages">
                <h1>Hi, 我是王一清，欢迎来到我的个人主页</h1>

                <p>这是我的个人展示页面，目前我还在学习，希望能更进一步</p>
                <br>
                <p>如果想要看看我的学习成果</p>
                <br>
                <p>Catch me：</p>
            </div>

            <div class="row">
                <a href="https://blog.csdn.net/weixin_51735670" class="csdn"><input type="button" value="CSDN"
                        id="csdn"></a></li>
                <a href="https://gitee.com/abab45152/projects" class="gitee"><input type="button" value="Gitee"
                        id="gitee"></a></li>
                <a href="https://mail.qq.com/" class="email"><input type="button" value="Email Me" id="email"></a></li>
            </div>

            <div class="foot">
                <h3>如果你想要联系我：</h3>
                <a href="www.baidu.com" class="qq">
                    <img border="0" src="../素材/images/OIP-C.jpg" />
                </a>
            </div>

        </div>
    </header>


    <section>
        <div id="second">
            <div class="about" style="color: black;">About Me</div>
            <br>
            <h1 class="ss">
                如你所见，游戏，交友，旅游，音乐
                <br>都是我喜欢的
            </h1>
            <div class="info">
                <div class="phone">
                    <img src="img/iphone.png">
                    <h1>游戏</h1>
                    <p>
                        放松闲暇时的不二之选，游戏种类涉猎较多，可以互相探讨对游戏内容的了解。我永远喜欢二次元！！
                    </p>
                </div>
                <div class="check">
                    <img src="img/check.png">
                    <h1>交友</h1>
                    <p>热爱交友，喜欢聊天，向他人倾诉自己的苦恼，这也是放松的一种。
                    </p>
                </div>
                <div class="pencil">
                    <img src="img/pencil.png" />
                    <h1>旅游</h1>
                    <p>
                        喜欢旅游，来一次毕业旅行，去祖国的大江南北看看，
                    </p>
                </div>
                <div class="setting">
                    <img src="img/settings.png">
                    <h1>音乐</h1>
                    <p>
                        喜欢纯音乐，可以边听音乐，边放松自己
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section id="third">
        <div>
            <div class="supportive">
                <h1>我的计划 <br> My Plan</h1>
                <br>
                <h2>大二计划</h2>
                <ul style="list-style-type: none;">
                    <li>准备2021年英语四级考试</li>
                    <li style="margin-left: 195px;">认真学习</li>
                    <li style="margin-left: 180px;">坚持学习编程</li>
                    <li>争取大三暑期能够去实习</li>
                </ul>
                <br>
                <h2>大三计划</h2>
                <ul style="list-style-type: none;">
                    <li>准备2022年英语六级考试</li>
                    <li style="margin-left: 195px;">进行实习</li>
                    <li style="margin-left: 195px;">好好学习</li>
                    <li style="margin-left: 187px;">来一场旅行</li>
                </ul>
                <br>
                <br>
            </div>
            <div class="ipad">
                <img src="../素材/images/OIP-C (2).jpg">
            </div>
        </div>
    </section>


    <section id="fourth">
        <div>
            <div class="work">
                <h1><strong>芜湖！起飞 <br> My Work</strong></h1>
                <br>
                <h2>尝试一个小小的图书管理系统</h2>
                <ul style="list-style-type: none;">
                    <h3>后端技术</h3>
                    <li style="margin-left: 290px;">MySql</li>
                    <li style="margin-left: 280px;">Mybatis</li>
                    <li style="margin-left: 270px;">SpringBoot</li>
                    <h3>前端技术</h3>
                    <li style="margin-left: 300px;">css</li>
                    <li style="margin-left: 290px;">Vue3</li>
                </ul>
                <br>
                <br>
            </div>
            <div class="show">
                <img src="../素材/images/Screenshot_20210921_212150_com.baidu.netdisk.jpg">
            </div>
        </div>
    </section>


</body>

</html>